<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小u课堂</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/index.js"></script>
    <script src="js/vue-v2.6.10.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 导航菜单 -->
        <nav>
            <div class="main">
                <img src="./img/index/logo.png" alt="" class="logo">
                <ul class="">
                    <li class="check"><a href="javascript:;">首页</a></li>
                    <li><a href="pages/online.html">全部课程</a></li>
                    <li><a href="javascript:;">在线练习</a></li>
                    <li><a href="javascript:;">精品课程</a></li>
                </ul>
                <div class="search">
                    <div class="left">课程<i class="iconfont icon-down"></i>
                    </div>
                    <input type="text" placeholder="搜索感兴趣的内容">
                    <img src="./img/index/search.png" alt="">
                </div>
                <!-- 登录和注册按钮，如果没有登录则显示，否则隐藏 -->
                <div class="login" v-show="f1">
                    <a href="./pages/loginAndRegister/login.html">登陆</a>
                    /
                    <a href="./pages/loginAndRegister/register.html">注册</a>
                </div>
                <!-- 用户中心，登录状态下显示 -->
                <div class="user"  v-show="f2">
                    <img src="./img/login/user.png" alt="">
                    <div class="userlist">
                        <ul>
                            <li>{{user.name}}</li>
                            <a href="../pages/course.html">
                                <li>课程中心</li>
                            </a>
                            <li>订单中心</li>
                            <li>资金管理</li>
                            <li>个人中心</li>
                            <li class="out">退出登陆</li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <!-- 主体内容 -->
        <main>
            <!-- banner -->
            <div class="banner">
                <ul class="img">
                    <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                    <li><img src="./img/index/tbanner1.png" alt=""></li>
                    <li><img src="./img/index/tbanner3.png" alt=""></li>
                </ul>
                <ul class="list">
                    <li class="high">24小时不断电大课堂</li>
                    <li>内容不够2</li>
                    <li>内容不够3</li>
                    <li>内容不够4</li>
                    <li>内容不够5</li>
                    <li>内容不够6</li>
                </ul>
            </div>


            <!-- java课程 -->
            <div class="online">
                <div class="title">
                    <span class="line"></span>
                    <span class="cont">Java</span>
                    <span class="more">更多课程<i class="iconfont icon-right1"></i>
                    </span>
                </div>
                <div class="onlineCont">
                    <div class="content">
                        <ul>
                            <li v-for="item in javaList">
                                <div class="top">
                                    <span class="rj">人教版</span>
                                    
                                    <img :src="'http://localhost:8080/eduimg/'+item.courseImage" style="width: 160px;" alt="" class="m">
                                    <p>价格：￥{{item.coursePrice}}</p>
                                </div>
                                <div class="bottom">
                                    <div class="left">
                                        <span>{{item.courseName}}</span>
                                        <span class="time">{{item.descs}}</span>
                                    </div>
                                    <div class="right">免费学习</div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 页面广告 -->
            <div class="contBanner">
                <img src="./img/index/WechatIMG20.png" alt="">
            </div>

            <!-- 数据库 -->
            <div class="testClass">
                <div class="title">
                    <span class="line"></span>
                    <span class="cont">数据库</span>
                    <span class="more">更多课程<i class="iconfont icon-right1"></i>
                    </span>
                </div>
                <div class="onlineCont">
                    <div class="content">
                        <ul>
                            <li v-for="(item,index) in mysqlList">
                                <div class="top">
                                    <span class="rj">北京</span>
                                    
                                    <img :src="'http://localhost:8080/eduimg/'+item.courseImage" style="width: 160px;" alt="" class="m">
                                    <p>价格：￥{{item.coursePrice}}</p>
                                </div>
                                <div class="bottom">
                                    <div class="left">
                                        <span>{{item.courseName}}</span>
                                        <span class="time">{{item.descs}}</span>
                                    </div>
                                    <div class="right">免费学习</div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 前端 -->
            <div class="goodClass">
                <div class="title">
                    <span class="line"></span>
                    <span class="cont">前端</span>
                    <span class="more">更多课程<i class="iconfont icon-right1"></i>
                    </span>
                </div>
                <div class="onlineCont">
                    <div class="content">
                        <ul>
                            <li v-for="item in webList">
                                <div class="top">
                                    <span class="rj">天津</span>
                                    <img :src="'http://localhost:8080/eduimg/'+item.courseImage" alt="" class="m">
                                    <p>价格：￥{{item.coursePrice}}</p>
                                </div>
                                <div class="bottom">
                                    <div class="left">
                                        <span>{{item.courseName}}</span>
                                        <span class="time">{{item.descs}}</span>
                                    </div>
                                    <div class="right">免费学习</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="rightCont">
                        <img src="./img/index/good_banner7.png" alt="">
                    </div>
                </div>
            </div>


            <div class="footB">
                <div><img src="./img/index/foot1.png" alt=""></div>
                <div><img src="./img/index/foot2.png" alt=""></div>
                <div><img src="./img/index/foot3.png" alt=""></div>
            </div>

            <div class="fix">
                <div class="lesson">
                    <img src="./img/index/mylesson.png" alt="">
                </div>
                <div class="test">
                    <img src="./img/index/mytest.png" alt="">
                </div>
                <div class="top">
                    <img src="./img/index/gotop.png" alt="">
                </div>
            </div>
        </main>
    </div>
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示
                </p>
                <p>
                    京ICP备10218183号-1 京ICP证161188号 七易时代科技有限公司 | 地址：北京市昌平区慧聪采购园 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                </p>
                <p>在线教育许可证：小优课堂经营许可证20188008号 | 互联网教育服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user:"",//
            f1:true,//登录和注册按钮
            f2:false,//用户中心
            javaList:[],//java
            mysqlList:[],//mysql
            webList:[],//web

        },
        methods: {
            initCourse(courseType,count) {
                var url="http://localhost:8080/myedu/fcourse?method=findCourse&courseType="+courseType+"&count="+count;
                axios.get(url).then(resp=>{
                    if (courseType==1) {
                        this.javaList= resp.data.data;
                    }else if(courseType==2){
                        this.mysqlList=resp.data.data;
                    }else if(courseType==3){
                        this.webList=resp.data.data;
                    }
                })
            },
            initParams() {
                var str = window.sessionStorage.getItem("login");
                if (str!=null && str!="") {
                    this.user = JSON.parse(str)
                    this.f2=true;
                    this.f1=false;
                }else{
                    this.f1=true;
                    this.f2=false;
                }
            }
        },
        mounted() {
            this.initParams();
            this.initCourse();
            this.initCourse(1,8);
            this.initCourse(2,9);
            this.initCourse(3,9);
        }

    })

</script>

</html>